{% extends 'account/base.html' %}

{#
    作者信息页 给别的用户看的
    审核没有通过的文章,不能显示出来
    这个页面不需要登录
#}
{% block profile %}
    <div class="profile-menu">
        <div class="profile-picture">
            <img src="/static/images/user_pic.png" alt="用户图片">
        </div>
        <div class="profile-name">{{ author.nick_name }}</div>
        <!--个人信息操作列表-->
        <ul class="profile-option-list">
            <div class="author_card" style="width: 96%;margin-bottom: 5px;padding: 5px" data-userid="{{ author.id }}">

                <div class="author_resume">{{ author.signature  or '这人什么都没留下' }}</div>
                <div class="author-card-info">
                    <div class="writings"><span>总篇数</span><b>{{ author.article_list.count() }}</b></div>
                    <div class="follows"><span>粉丝</span><b>{{ author.followers.count() }}</b></div>
                    {# 可以在前端写关注判断 #}
                    <a href="javascript:;" class="focused"
                       style="display: {% if is_followed %} inline-block {% else %} none {% endif %}">
                        <span class="over">取消关注</span>
                    </a>

                    <a href="javascript:;" class="focus"
                       style="display:  {% if is_followed %} none {% else %} inline-block {% endif %}">
                        关注
                    </a>
                </div>
            </div>
        </ul>
    </div>
{% endblock %}
{% block main %}
    <div class="profile-card">
        <h3 class="profile-card-title">文章</h3>
        <ul class="profile-articles">
            {% for item in paginate.items %}
                <li>
                    <a href="/article/{{ item.id }}">{{ item.title }}</a>
                </li>
            {% endfor %}
        </ul>
        <div class="profile-pagination">
            <div id="test1"></div>
        </div>
    </div>
{% endblock %}


{% block footer_script %}
    <script>
        layui.use('laypage', function() {
            var laypage = layui.laypage;

            //执行一个laypage实例
            laypage.render({
                elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                , count: {{paginate.total}} //数据总数，从服务端得到
                , curr: {{ paginate.page }}
                , limit: {{ paginate.per_page}}
                , jump: function(obj, first) {
                    // obj包含了当前分页的所有参数，比如：
                    //首次不执行
                    if (!first) {
                        let searchParams = new URLSearchParams(location.search);
                        searchParams.set('page', obj.curr);
                        // 更新 url 调用浏览器默认的方式请求后端
                        location.search = searchParams.toString();
                        // ajax 进行请求  动态更新 jquery 修改页面
                    }
                },
            });
        });
    </script>
{% endblock %}
